<template>
	<view class="community">
		<div class="top">
			<div class="left">
				<span class="iconfont icon-zuojiantou" @click="go"></span>
			</div>
			<div class="center">
				<u-search placeholder="请输入关键字" v-model="this.query.keyword" @search="search"></u-search>
			</div>
			<div class="right" @click="add">+</div>
		</div>
		<view class="scorll" >
			<view class="button1">
				<u-button :type="active==0?'primary':'default'" text="全部" @click="tab(0)"></u-button>
			</view>
			<view class="scorll-item" v-for="(item,index) in tablist.rows" :key="index">
					<u-button :type="index+1==active?'primary':'default'"  :text="item.title" class="button" @click="tab(item.id,index+1)"></u-button>
			</view>
		</view>
		<view class="nav">
			<div class="left">总帖子 {{tablist.postCount}}</div>
			<div class="right">总用户{{tablist.userCount}}</div>
		</view>
		<div class="content" v-for="(item,list) in list" :key="index">
			<div class="content-top" @click="detail(item)">
				<div class="left">
					<div class="tou">
						<img :src="item.user.avatar" alt="">
					</div>
					<div class="text">
						<p>{{item.user.name}}</p>
						<p>{{item.user.sex}}</p>
					</div>
				</div>
				<div class="right">
					<span v-if="item.is_top==1">精华</span> 
				</div>
			</div>
			<div class="center">
				<view class="">
					{{item.desc.text}}
				</view>
				<img :src="t" alt="" v-for="(t,i) in item.desc.images" :key="index" >
			</div>
			<div class="bottom">
				<div class="left">
					<span>评论{{item.comment_count}}</span>
					<span>点赞{{item.support_count}}</span>
				</div>
				<div class="right">{{item.created_time}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	import{getbbs,getlist} from '../request/index.js'
	export default {
		data() {
			return {
				query:{
					page:1
				},
				tablist:{},
				query:{
					page: 1,
					bbs_id: 0,
					keyword:''
				},
				list:[],
				active:0,
			};
		},
		methods:{
			detail(val){
				console.log(val);
				uni.navigateTo({
					url:`/pages/community/postDetail?id=${val.id}`
				})
			},
			go(){
				uni.navigateBack(1)
			},
			add(){
				uni.navigateTo({
					url:"/pages/addPost/addPost"
				})
			},
			tab(id,i){
				this.query.bbs_id=id
				this.active=i
				console.log(i);
				this.getlist1()
			},
			search(e){
				console.log(e);
				this.query.keyword=e
				this.getlist1()
			},
			getlist1(){
				getlist(this.query).then(res=>{
					this.list=res.data.data.rows
					console.log(this.list);
				})
			},
			onReachBottom(){
				this.query.page++
				this.getlist1()
			},
			onPullDownRefresh(){
				this.query.page=1
				this.getlist1()
				setTimeout(()=>{
					uni.stopPullDownRefresh()
				},1000)
			}
		},
		onLoad() {
			getbbs(this.query).then(res=>{
				this.tablist=res.data.data
				console.log(res.data.data);
			})
			this.getlist1()
		}
	}
</script>

<style lang="scss">
.community{
	width: 100%;
	height: 100%;
	.top{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.content{
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		border-top: 10px solid #f5f5f3;
		.content-top{
			width: 100%;
			height: 80px;
			display: flex;
			justify-content: space-between;
			.left{
				display: flex;
				.tou{
					width: 50px;
					height: 50px;
					border-radius: 50%;
					img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}
		.center{
			width: 100%;
			img{
				width: 100px;
				height: 100px;
			}
		}
		.bottom{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
	}
	.scorll{
		width: 100%;
		display: flex;
		height:50px;
		overflow-x: auto;
		.button1{
			width: 100px;
		}
		.scorll-item{
			width: 100px;
			height: 50px;
			margin-left: 10px;
		}
		
	}
	.nav{
		width: 100%;
		height: 50px;
		display: flex;
		text-align: center;
		border-top: 10px solid #f5f5f3;
		.left{
			width: 50%;
			height: 100%;
			line-height: 50px;
		}
		.right{
			width: 50%;
			height: 100%;
			line-height: 50px;
		}
	}
}
</style>
